<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传模板</title>
<!--适应移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css样式-->
<style>
	body{background-color: #EBEBEB}
	.aaa{
		width: auto;
		height: 600px;
		background-color: #CB4F51;
		padding-top: 100px;
		padding: 50px;
		display: block;
	}
	#box{
		width: 800px;
		height: 100px;
		display: block;
		margin: 0 auto;
		text-align: center;
		
	}
	#file_name{
		
    	width: 400px;
    	height: 30px;
  
  	}
  a.input {
    width:70px;
    height:30px;
   line-height:30px;
    background:#3091d1;
   text-align:center;
   display:inline-block;/*具有行内元素的视觉，块级元素的属性 宽高*/
   overflow:hidden;/*去掉的话，输入框也可以点击*/
   position:relative;/*相对定位，为 #file 的绝对定位准备*/
   top:10px;
 }
 a.input:hover {
   background:#31b0d5;
   color: #ffffff;
 }
 a{
   text-decoration:none;
   color:#FFF;
 }
 #file {
  opacity:0;/*设置此控件透明度为零，即完全透明*/
   filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
   font-size:100px;
   position:absolute;/*绝对定位，相对于 .input */
   top:0;
   right:0;
 }
 #submit{
 	 opacity:0;/*设置此控件透明度为零，即完全透明*/
   filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
   font-size:100px;
   position:absolute;/*绝对定位，相对于 .input */
   top:0;
   right:0;
 }
 #t_box{
 	width: 100%;
 	margin-top: 400px;
 	margin-bottom: 20px;
 	text-align: center;
 }
 #t{
 	
 	font-family: "微软雅黑";
 	color: darkblue;
 }
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
	
	<div class="aaa">
		<form method="post" action="/upload" enctype="multipart/form-data">
			<div id="box">
				<input type="text" id="file_name" readonly="readonly" value="未选择文件" />
			  <a href="javascript:void(0);" class="input">
			    浏览
			    <input type="file" id="file" name="document[file]">
			  </a>
			  <a href="javascript:void(0);" class="input">
			    上传
			    <input type="submit" name="sudmit" id="submit" value="上传" />
			  </a>
			  <br><br><br>
			  <div id="t_box">
			  	 <span id="t">值得信任的内容托管系统-8%的可靠和累积23小时的无障碍运行性</span>
			  </div>
			
			</div>
		
		
		</form>
		
		
	</div>
 <script type="text/javascript">
    $(function(){
        $("#file").change(function(){  // 当 id 为 file 的对象发生变化时
            var fileSize = this.files[0].size;
            var size = fileSize / 1024 / 1024;
            if (size > 5) {
                alert("附件不能大于5M,请将文件压缩后重新上传！");
                this.value="";
                return false;
            }else{
                $("#file_name").val($("#file").val());  //将 #file 的值赋给 #file_name
            }
        });
        $("form").submit(function(){
        	if($("#file").val()==""||$("#file").val()==null){
        		alert("未选择文件");
        		return false;
        	}
        });
    });

</script>

</body>
</html>